<template>
  <div>
    <TopNav></TopNav>
    <SearchHouse></SearchHouse>
    <div class="dropdown">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" ref="checkboxArea" title="区域">
          <van-area :area-list="areaList" @cancel="cancelArea" @confirm="completeArea" />
        </van-dropdown-item>
        <van-dropdown-item v-model="value2" ref="checkboxWay" title="方式">
          <van-picker show-toolbar :columns="wayList" @cancel="cancelWay" @confirm="completeWay" />
        </van-dropdown-item>
        <van-dropdown-item v-model="value3" ref="checkboxRent" title="租金">
          <van-picker show-toolbar :columns="rentList" @cancel="cancelRent" />
        </van-dropdown-item>
        <van-dropdown-item v-model="value4" title="筛选">
          <van-popup v-model="show" :overlay="false" position="right">
            <van-cell-group class="cell">
              <van-cell title="户型"></van-cell>
              <van-grid>
                <van-grid-item @click="setActive(item)" :class="{ active: item.value === false }" v-for="(item, index) in roomList" :key="index" :text="item.label" />
              </van-grid>
              <van-cell title="朝向"></van-cell>
              <van-grid>
                <van-grid-item @click="setActive(item)" :class="{ active: item.value === false }" v-for="(item, index) in aspectList" :key="index" :text="item.label" />
              </van-grid>
              <van-cell title="楼层"></van-cell>
              <van-grid>
                <van-grid-item @click="setActive(item)" :class="{ active: item.value === false }" v-for="(item, index) in floorList" :key="index" :text="item.label" />
              </van-grid>
              <van-cell title="房屋亮点"></van-cell>
              <van-grid>
                <van-grid-item @click="setActive(item)" :class="{ active: item.value === false }" v-for="(item, index) in brightList" :key="index" :text="item.label" />
              </van-grid>
            </van-cell-group>
            <div class="btn">
              <van-grid>
                <van-grid-item text="清除" />
                <van-grid-item text="确认" />
              </van-grid>
            </div>
          </van-popup>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <HouseList :list="list"></HouseList>
    </van-list>
  </div>
</template>

<script>
import TopNav from '@/components/TopNav.vue'
import SearchHouse from '@/components/SearchHouse.vue'
import { getCityData, getConditionHouse, getEnquiryHousing } from '@/api/article'
import HouseList from '@/components/HouseList.vue'
export default {
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      bodyConditionHouse: {},
      value1: 0,
      value2: 0,
      value3: 0,
      value4: 0,
      areaList: {
        province_list: {
          // 当前
          110000: '区域',
          120000: '地铁'
        },
        city_list: {
          // 子级城市
        },
        county_list: {
          110101: '东城区',
          110102: '西城区'
        }
      },
      wayList: [],
      rentList: [],
      show: true,
      roomList: [],
      aspectList: [],
      floorList: [],
      brightList: [],
      enquiryHousing: {
        cityId: this.bodyCity,
        // area: 'AREA|88cff55c-aaa4-e2e0',
        // subway: null,
        // rentType: true,
        // price: null,
        // more: 'CHAR|76eb0532-8099-d1f4,FLOOR|1,AREA|88cff55c-aaa4-e2e0,ORIEN|61e99445-e95e-7f37,true',
        // roomType: 'ROOM|d1a00384-5801-d5cd',
        // oriented: 'ORIEN|61e99445-e95e-7f37',
        // characteristic: 'CHAR|76eb0532-8099-d1f4',
        // floor: 'FLOOR|1',
        start: 1,
        end: 20
      },
      area: '',
      areas: '',
      subway: '',
      rentType: '',
      price: '',
      bodyCity: ''
    }
  },
  components: {
    TopNav,
    SearchHouse,
    HouseList
  },
  methods: {
    setActive (item) {
      item.value = !item.value
    },
    cancelRent () {
      this.$refs.checkboxRent.toggle()
    },
    cancelArea () {
      this.$refs.checkboxArea.toggle()
    },
    cancelWay () {
      this.$refs.checkboxWay.toggle()
    },
    completeArea (value) {
      console.log(value)
      if (value[value.length - 1] !== undefined && value[value.length - 1].name !== '不限') {
        this.area = value[value.length - 1].name
      } else if (value[value.length - 2].name !== '不限') {
        this.area = value[value.length - 2].name
      } else {
        this.area = ''
      }
      console.log(this.area)
      if (value[0].name === '区域') {
        const arr = this.bodyConditionHouse.area.children
        // console.log(arr)
        arr.forEach((item) => {
          if (item.label === '不限') return
          const arr = item.children
          // console.log(arr)
          if (item.label === this.area) {
            this.area = item.value
          } else {
            arr.forEach((item) => {
              if (item.label === '不限') return
              if (item.label === this.area) {
                this.areas = item.value
              }
            })
          }
        })
      } else {
        const arr = this.bodyConditionHouse.subway.children
        // console.log(arr)
        arr.forEach((item) => {
          if (item.label === '不限') return
          const arr = item.children
          // console.log(arr)
          if (item.label === this.area) {
            this.area = item.value
          } else {
            arr.forEach((item) => {
              if (item.label === '不限') return
              if (item.label === this.area) {
                this.subway = item.value
              }
            })
          }
        })
      }
      // 地区
      this.enquiryHousing.area = this.areas
      // 地铁
      this.enquiryHousing.subway = this.subway
      console.log(this.areas)
      console.log(this.subway)
    },
    completeWay (value) {
      this.rentType = value === '整租'
      // console.log(this.rentType)
      // 整租
      this.enquiryHousing.rentType = this.rentType
    },
    async onLoad () {
      const { body } = await getEnquiryHousing(this.enquiryHousing)
      this.start += 1
      this.end += 20
      this.list.push(...body.list)
      this.loading = false
      // 如果没有数据了
      // if (this.current > data.pageTotal) {
      //   this.finished = true
      // }
    }
  },
  async created () {
    const { body: bodyCity } = await getCityData({ name: localStorage.getItem('current') })
    this.bodyCity = bodyCity
    // console.log(bodyCity)
    const { body: bodyConditionHouse } = await getConditionHouse({ id: bodyCity.value })
    console.log(bodyConditionHouse)
    this.bodyConditionHouse = bodyConditionHouse
    // 子级城市
    const objSubLevelCity = {}
    bodyConditionHouse.area.children
      .map((item) => item.label)
      .forEach((item, index) => {
        const indexs = +index >= 9 ? +index + 2 : +index + 1 + '0'
        objSubLevelCity[`11${indexs}00`] = item
      })
    this.areaList.city_list = objSubLevelCity
    // 小区房源
    const arrCommunity = []
    const objCommunity = {}
    const newobjCommunity = {}
    bodyConditionHouse.area.children.forEach((item) => {
      arrCommunity.push(item.children)
      arrCommunity.forEach((item, index) => {
        const indexs = +index >= 9 ? +index + 2 : +index + 1 + '0'
        objCommunity[`11${indexs}00`] = item
        for (const key in objCommunity) {
          if (objCommunity[key] !== undefined) {
            objCommunity[key].forEach((item, index) => {
              const keys = key[0] + key[1] + key[2] + key[3]
              const indexs = +index >= 9 ? +index + 2 : +index + 1 + '0'
              newobjCommunity[`${keys}${indexs}`] = item.label
            })
          }
        }
      })
    })
    this.areaList.county_list = newobjCommunity
    // 地铁路线
    const objSubwayRoute = {}
    bodyConditionHouse.subway.children
      .map((item) => item.label)
      .forEach((item, index) => {
        const indexs = +index >= 9 ? +index + 2 : +index + 1 + '0'
        objSubwayRoute[`12${indexs}00`] = item
      })
    Object.assign(this.areaList.city_list, objSubwayRoute)
    // 地铁沿途
    const arrAlongSubway = []
    const objAlongSubway = {}
    const newobjAlongSubway = {}
    bodyConditionHouse.area.children.forEach((item) => {
      arrAlongSubway.push(item.children)
      arrAlongSubway.forEach((item, index) => {
        const indexs = +index >= 9 ? +index + 2 : +index + 1 + '0'
        objAlongSubway[`12${indexs}00`] = item
        for (const key in objAlongSubway) {
          if (objAlongSubway[key] !== undefined) {
            objAlongSubway[key].forEach((item, index) => {
              const keys = key[0] + key[1] + key[2] + key[3]
              const indexs = +index >= 9 ? +index + 2 : +index + 1 + '0'
              newobjAlongSubway[`${keys}${indexs}`] = item.label
            })
          }
        }
      })
    })
    Object.assign(this.areaList.county_list, newobjAlongSubway)
    // 方式
    this.wayList = bodyConditionHouse.rentType.map((item) => item.label)
    // 租金
    this.rentList = bodyConditionHouse.price.map((item) => item.label)
    // 筛选
    this.roomList = bodyConditionHouse.roomType
    this.aspectList = bodyConditionHouse.oriented
    this.floorList = bodyConditionHouse.floor
    this.brightList = bodyConditionHouse.characteristic
    // 地区的id
    this.enquiryHousing.cityId = bodyCity.value
    // 房屋查询数据
    const { body } = await getEnquiryHousing(this.enquiryHousing)
    this.list = body.list
    // 地区
    // this.enquiryHousing.area = this.areas
    // // 地铁
    // this.enquiryHousing.subway = this.subway
    // // 整租
    // this.enquiryHousing.rentType = this.rentType
    // // 价格
    // this.enquiryHousing.price = null
    // 复合查询
    // this.enquiryHousing.more = ''
    // 房屋类型
    // this.enquiryHousing.roomType = '房屋类型'
    // 朝向
    // this.enquiryHousing.oriented = '朝向'
    // 标签
    // this.enquiryHousing.characteristic = '标签'
    // 楼层
    // this.enquiryHousing.floor = '楼层'
    // 开始项
    this.enquiryHousing.start = 1
    // 结束项
    this.enquiryHousing.end = 20
  }
}
</script>

<style lang="less" scoped>
/deep/ .search {
  position: absolute;
  top: 6px;
  left: 50px;
  z-index: 2;
  .van-icon {
    color: #fff;
    font-size: 20px;
  }
}

/deep/ .van-cell {
  height: 7.33333vw !important;
}

/deep/ .van-overlay {
  position: relative;
  .van-popup {
    position: absolute;
  }
}

.dropdown {
  /deep/ .cell {
    height: 200px !important;
    width: 300px !important;
    padding-bottom: 280px;
    padding-top: 40px;
    .van-cell {
      border-top: solid 1px RGB(229, 229, 229);
      border-bottom: #fff !important;
    }
    .van-grid {
      margin: 5px 0px !important;
      margin-left: 30px !important;
      .van-grid-item__content {
        width: 70px !important;
        padding: 0px 0px !important;
        border: solid 1px RGB(221, 221, 221);
        margin: 1px 7px;
        border-radius: 10%;
        height: 25px;
      }
    }
  }
}

.active {
  /deep/ div {
    border: solid 1px RGB(33, 185, 122) !important;
    background-color: RGB(222, 250, 239);
    color: RGB(33, 185, 122) !important;
  }
  /deep/ .van-grid-item__text {
    color: RGB(33, 185, 122) !important;
  }
}

/deep/ .van-dropdown-menu__title--active {
  color: RGB(33, 185, 122) !important;
}

/deep/ .btn {
  .van-hairline {
    color: RGB(33, 185, 122) !important;
    background-color: #fff !important;
    width: 150px !important;
    height: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}
</style>
